<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多列布局_图片</title>
  <style>
    .outer{
      border: 1px solid black;
      /*开启多列分布*/
      column-count: 5;
      margin: 100px auto;
    }
    img{
      width: 100%;
      /*过渡*/
      transition: 0.5s linear;
    }
    img:hover{
      /*缩放*/
      transform: scale(1.3);
      /*增加阴影*/
      box-shadow: 0 0 10px black ;
    }
  </style>
</head>
<body>
<div class="outer">
  <img src="../../resource/元瑶1.jpg">
  <img src="../../resource/元瑶2.jpg">
  <img src="../../resource/猫猫遂遂.jpg">
  <img src="../../resource/年年无语.jpg">
  <img src="../../resource/玄骨1.jpg">
  <img src="../../resource/韩立1.png">
  <img src="../../resource/墨彩环.jpg">
  <img src="../../resource/陈巧倩.jpg">
  <img src="../../resource/陈巧倩2.jpg">
  <img src="../../resource/南宫婉1.jpg">
  <img src="../../resource/南宫婉2.jpg">

</div>
</body>
</html>